<template>
    <div class="login">
        <SimpleHeader :name="state.type =='login' ? '登录' :'注册'" :back="'/home'"></SimpleHeader>
        <img class="logo" :src="img0" >
        <div class="login-body login" v-if="state.type == 'login'">
            <van-form @submit="onSubmit">
                    <van-field
                    v-model="state.username"
                    name="username"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                    v-model="state.password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <van-field
                        v-model="state.verify"
                        center
                        clearable
                        label="验证码"
                        placeholder="请输入验证码"
                    >
                        <template #button>
                            <VueImageVerify ref="verifyRef"/>
                        </template>
                    </van-field>
                <div style="margin: 16px;">
                    <div class="link-register" @click="toggle('')">立即注册</div>
                    <van-button round block type="primary" native-type="submit">
                    登录
                    </van-button>
                </div>
                </van-form>
        </div>
        <div class="login-body register" v-else>
            <van-form @submit="onSubmit">
                    <van-field
                    v-model="state.username"
                    name="username1"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                    v-model="state.password"
                    type="password"
                    name="password1"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <van-field
                        v-model="state.verify"
                        center
                        clearable
                        label="验证码"
                        placeholder="请输入验证码"
                    >
                        <template #button>
                            <VueImageVerify ref="verifyRef"/>
                        </template>
                    </van-field>
                <div style="margin: 16px;">
                    <div class="link-login" @click="toggle('login')">登录已有账号</div>
                    <van-button round block type="primary" native-type="submit">
                    注册
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup>
import img0 from '@/assets/imgs/9.9.png'
import {useRouter} from 'vue-router'
import {ref,reactive} from 'vue'
import VueImageVerify from '../components/VueImageVerify.vue';
import { showFailToast, showToast ,showSuccessToast} from 'vant';
import md5 from 'js-md5'
import { login , register} from '@/service/user'
import axios from 'axios'
import { setLocal } from '@/common/js/utils'

const router = useRouter()
const verifyRef = ref(null)
const state = reactive({
    username:'',
    username1:'',
    password:'',
    password1:'',
    verify:'',
    imgCode:'',
    type:'login'
})

const onSubmit = async (values) => {
    state.imgCode = verifyRef.value.state.imgCode || ''
    if(state.verify.toLowerCase() != state.imgCode.toLowerCase()){
        showFailToast('验证码错误');
        return
    }
    if(state.type == 'login') {
        const {data} = await login({
            "loginName": values.username,
            "passwordMd5": md5(values.password)
        })
        console.log(data);
        setLocal('token',data)
        // 刷新一下页面 否则token不会被重置
        window.location.href = "/"
    } else {
        await register({
            "loginName": values.username1,
            "password": values.password1
        })
        showSuccessToast('注册成功')
        state.type = 'login'
        state.verify = ''
    }
    
    // axios.post('http://backend-api-01.newbee.ltd/api/v1/user/login',{"loginName": values.username,
    // "passwordMd5": md5(values.password)}).then(res=>{
    //     console.log(res);
    // })
    // console.log(data);
};
const goBack = ()=>{
    router.push({path:'home'})
}

const toggle =(type)=>{
    state.type = type
    state.verify = ''
}
</script>

<style lang="less">
  .login {
    .logo {
      width: 120px;
      height: 120px;
      display: block;
      margin: 80px auto 20px;
    }
    .login-body {
      padding: 0 20px;
    }
    .login {
      .link-register {
        font-size: 14px;
        margin-bottom: 20px;
        color: #1989fa;
        display: inline-block;
      }
    }
    .register {
      .link-login {
        font-size: 14px;
        margin-bottom: 20px;
        color: #1989fa;
        display: inline-block;
      }
    }
    .verify-bar-area {
      margin-top: 24px;
      .verify-left-bar {
        border-color: #1baeae;
      }
      .verify-move-block {
        background-color: #1baeae;
        color: #fff;
      }
    }
    .verify {
      >div {
        width: 100%;
      }
      display: flex;
      justify-content: center;
      .cerify-code-panel {
        margin-top: 16px;
      }
      .verify-code {
        width: 40%!important;
        float: left!important;
      }
      .verify-code-area {
        float: left!important;
        width: 54%!important;
        margin-left: 14px!important;
        .varify-input-code {
          width: 90px;
          height: 38px!important;
          border: 1px solid #e9e9e9;
          padding-left: 10px;
          font-size: 16px;
        }
        .verify-change-area {
          line-height: 44px;
        }
      }
    }
  }
</style>
